<template>
  <div
    class="tip font-size-10 font-weight-500 line-height-120"
    :class="{ expand, nowrap, narrow: ltThreeLine }"
    ref="tip"
  >
    <slot></slot>
    <div v-if="heartBubble" class="heart-bubble">
      <Icon class="heart heart1" size="16" shadow name="heartActive"></Icon>
      <Icon class="heart heart2" size="16" shadow name="heartActive"></Icon>
      <Icon class="heart heart3" size="16" shadow name="heartActive"></Icon>
      <Icon class="heart heart4" size="16" shadow name="heartActive"></Icon>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { useElementSize } from '@vueuse/core'

defineProps({
  nowrap: { type: Boolean, default: false },
  heartBubble: { type: Boolean, default: false },
})

const tip = ref(null)
const { height } = useElementSize(tip)
const ltThreeLine = computed(() => height.value < 36)

const expand = ref(false)
onMounted(() => requestAnimationFrame(() => (expand.value = true)))
</script>

<style lang="scss" scoped>
@keyframes float {
  0% {
    transform: translateY(4rem);
    opacity: 0;
  }
  20% {
    transform: translateY(3rem);
    opacity: 1;
  }
  100% {
    transform: translateY(-1rem) scale(0.33);
    opacity: 0;
  }
}

.tip {
  width: 7.5rem;
  padding: 0.25rem 1rem;
  border-radius: 1.25rem 1.875rem 0.125rem 1.25rem;
  background: linear-gradient(180deg, rgba(249, 94, 14, 0.75) -40%, rgba(231, 23, 179, 0.75) 112.5%);
  position: relative;
  transition: transform 0.2s cubic-bezier(0.08, 0.7, 0.6, 1);
  transform: translate(-100%, -220%) scaleX(0);
  transform-origin: right;

  &.expand {
    transform: translate(-100%, -220%) scaleX(1);
  }

  &.nowrap {
    width: fit-content;
    white-space: nowrap;
  }

  &.narrow {
    transform: translate(-105%, -220%) scaleX(0);
    &.expand {
      transform: translate(-105%, -220%) scaleX(1);
    }
    .heart-bubble {
      clip-path: polygon(
        0% 62%,
        0% 0%,
        100% 0%,
        100% 100%,
        94% 94%,
        90% 90%,
        86% 86%,
        78% 78%,
        64% 71%,
        44% 65%,
        10% 62%
      );
    }
  }

  .heart-bubble {
    width: 1.5rem;
    height: 4rem;
    position: absolute;
    top: -2.5rem;
    right: 0rem;
    overflow: hidden;
    clip-path: polygon(
      0% 64%,
      0% 0%,
      100% 0%,
      100% 100%,
      94% 94%,
      90% 90%,
      86% 86%,
      80% 82%,
      72% 79%,
      66% 76%,
      54% 72%,
      42% 69%,
      0% 64%
    );

    .heart {
      position: absolute;
      top: 0;
      animation: float 1.3s linear infinite;
      &.heart1 {
        left: 0.0625rem;
        animation-delay: 0s;
      }
      &.heart2 {
        left: 0.625rem;
        animation-delay: -0.2s;
      }
      &.heart3 {
        right: 0;
        animation-delay: -0.8s;
      }
      &.heart4 {
        right: 0.1875;
        animation-delay: -0.5s;
      }
    }
  }
}
</style>
